
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {
                width: 100%;
                background: lightblue;
                border-collapse: collapse;
            }
            
            td {
                width:50%;
                border: 2px solid white;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="请输入城市名称" value="郑州" id="city">
        <br>
        <button id="btn">查询</button>
        <table id="city_table">
            <tr>
                <td>城市名称</td>
                <td>城市id</td>
            </tr>
        </table>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    // 1. 获取可用的城市列表
                    $.ajax({
                        url:"http://apis.baidu.com/apistore/weatherservice/citylist",
                        type:"get",
                        data:{cityname:$("#city").val()},
                        headers:{apikey:"764bea985cfd0e960fdca55c95d26f27"},
                        dataType:'json',
                        success:function(response,status,xhr){
                            if(response.errMsg === 'success') {
                                var retData = response.retData;
                                var html = $("#city_table").html();
                                for(var i=0;i<retData.length;i++) {
                                    var city_obj = retData[i];
                                    html += '<tr>';
                                    html += '<td>';
                                    html += "<a target='__blank' href='city_weather.php?cityname="+city_obj.name_cn+"&cityid="+city_obj.area_id+"'>";
                                    html += city_obj.name_cn;
                                    html += "</a>";
                                    html += '</td>'
                                    html += '<td>';
                                    html += city_obj.area_id;
                                    html += '</td>'
                                    html += '</tr>';
                                }                               
                                $("#city_table").html(html);
                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>